const xloading = Vue.reactive({
  loading: false,
  tip: '',
  show(tip) {
    if (tip) this.tip = tip;
    this.loading = true;
  },
  close() {
    this.loading = false;
    this.tip = '';
  }
});
const loadingTemplate = `
  <transition name="bounce">
    <div
      v-if="xloading.loading"
      style="
        z-index: 999999;
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      "
    >
      <div
        style="
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
          background-color: rgba(255, 255, 255, 0.7);
        "
      ></div>

      <div class="spinner">
        <div class="ani">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
        <span v-if="xloading.tip" style="margin-top: 10px; color: #64b9ff">{{
          xloading.tip
        }}</span>
      </div>
    </div>
  </transition>
`;

const xLoadingCfg = {  
  setup(props) {
    return {
      xloading,
    };
  },
  template: loadingTemplate,
};

const loadingApp = Vue.createApp(xLoadingCfg);
const loading_ = loadingApp.mount(document.createElement('div'));
document.body.appendChild(loading_.$el);